<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增商品信息')"/>
    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/xingkong/css/images.css}" rel="stylesheet">
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label is-required">商品名称</label>
                    <div class="col-xs-6">
                        <input name="productName" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label is-required">商品类别</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                        <input name="categoryId" id="treeId" class="form-control" type="hidden">

                        <input name="categoryName" onclick="selectCategoryTree()" id="treeName" type="text"
                               placeholder="请选择商品分类" class="form-control" required>
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品状态</label>
                    <div class="col-xs-6">
                        <div class="radio-box " th:each="dict : ${@dict.getType('product_sale_status')}">
                            <input type="radio" th:id="${'productStatus_' + dict.dictCode}" name="productStatus"
                                   th:value="${dict.dictValue}"
                                   th:checked="${dict.default}" required>
                            <label th:for="${'productStatus_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品单位</label>
                    <div class="col-xs-6">
                        <input name="unit" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">虚拟销量</label>
                    <div class="col-xs-6">
                        <input name="userName" class="form-control" type="text" maxlength="30"
                               required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">关键字</label>
                    <div class="col-xs-10">
                        <input name="kayword" class="form-control"
                               type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品简介</label>
                    <div class="col-xs-10">
                        <textarea name="productBrief" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">首页主图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload-img">
                            <img id="indexMainUrl" name="mainFileUrl" class="product-img" th:src="@{/img/add.png}">
                            <!--                            <input type="hidden" name="mainFileUrl" id="mainFileUrl">-->
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">详情轮播图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload" id="detailSwiperImgs">
                            <img th:src="@{/img/add.png}" name="detailSwiperImg" id="detailSwiperImg" class="product-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-xs-2 control-label">商品详情图</label>
                    <div class="col-xs-10">
                        <div class="layui-upload" id="prdutDetalimages">
                            <img th:src="@{/img/add.png}" id="prdutDetalimage" class="product-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <label class="col-sm-2 control-label">规格</label>
                <div class="col-xs-2">
                    <select class="form-control mb5" onchange="changeSpec">
                        <option value="" selected>无规格</option>
                        <option th:each="" th:text="" th:value=""></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">成本价</label>
                    <div class="col-xs-2">
                        <input type="text" name="" class="form-control">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">销售价</label>
                    <div class="col-xs-2">
                        <input type="text" name="salePrice" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">库存</label>
                    <div class="col-xs-2">
                        <input type="text" name="productStock" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:src="@{/xingkong/js/image-upload.js}"></script>
<script type="text/javascript">

    var prefix = ctx + "product/product"
    $("#form-product-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-product-add').serialize());
        }
    }

    var uploadUrl = ctx + 'common/upload';
    $.imageManager.uploadImage(uploadUrl, "indexMainUrl", "indexMainUrl");
    $.imageManager.uploadImages(uploadUrl, "detailSwiperImg", "detailSwiperImgs");
    $.imageManager.uploadImages(uploadUrl, "prdutDetalimage", "prdutDetalimages");

    /*用户管理-新增-选择部门树*/
    function selectCategoryTree() {
        var treeId = $("#treeId").val();
        var categoryId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
        var url = ctx + "product/category/selectCategoryTree/" + categoryId;
        var options = {
            title: '选择部门',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }


    function doSubmit(index, layero) {
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        var body = layer.getChildFrame('body', index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        layer.close(index);

    }


    function addSpecification(){


        $.modal.open('设置规格',ctx+ "product/specification/select",800,400,callback);

    }
    // function callback(index, layero) {
    //     //获取父页面
    //     var specificationes = layer.getChildFrame('body', index).find("#specVauleList").children();
    //
    //
    // }



</script>
</body>
</html>